<template>
  <div class="form-group" style="padding-right:30px;">
    <div class="row">
      <div class="col-xs-12 buttom_margin">
        <span>期間条件</span>
      </div>
      <div class="col-xs-12">
        <label class="hide">
          <input type="radio" name="timeTypeRadio" v-model="dateObj.dateCondition" value="past" />
          <span>昨対</span>
        </label>
        <label class="left_margin hide">
          <input type="radio" name="timeTypeRadio" v-model="dateObj.dateCondition" value="now" />
          <span>指定期間</span>
        </label>
        <label class="left_margin hide">
          <input
            type="radio"
            name="timeTypeRadio"
            v-model="dateObj.dateCondition"
            value="dateGoods"
          />
          <span>期間商品軸</span>
        </label>
      </div>
      <div class="col-xs-12">
        <select name="timeType" class="form-control input-sm" v-model="dateType">
          <option value="M">年月</option>
          <option value="m" v-show="fasicalFlag">会計月</option>
          <option value="w">年週</option>
        </select>
      </div>
      <div class="col-xs-12">
        <div class="row" style="margin-top:5px;">
          <div class="col-xs-5" style="padding-right:0px;">
            <span style="line-height:30px;">{{dateNameList[0]}}:</span>
          </div>
          <div class="col-xs-7" style="padding-left:0px;">
            <dateComponent
              :dateInfo="this.dateObj.dateArray[0]"
              class="input-sm"
              :isfav="$attrs.isfav.date.dateA"
              :company="companyValue"
            ></dateComponent>
          </div>
        </div>
        <div :class="[{'hideCondition':this.dateObj.dateCondition == 'past'},'row']">
          <div class="col-xs-5" style="padding-right:0px;">
            <span style="line-height:30px;">{{dateNameList[1]}}:</span>
          </div>
          <div class="col-xs-7" style="padding-left:0px;">
            <dateComponent
              :dateInfo="this.dateObj.dateArray[1]"
              class="input-sm"
              :isfav="$attrs.isfav.date.dateB"
              :company="companyValue"
            ></dateComponent>
          </div>
        </div>
        <div
          :class="[{'hideCondition':this.dateObj.dateCondition == 'past' || this.dateObj.dateCondition == 'now'},'row']"
        >
          <div class="col-xs-5" style="padding-right:0px;">
            <span style="line-height:30px;">{{dateNameList[2]}}:</span>
          </div>
          <div class="col-xs-7" style="padding-left:0px;">
            <dateComponent
              :dateInfo="this.dateObj.dateArray[2]"
              class="input-sm"
              :isfav="$attrs.isfav.date.dateC"
              :company="companyValue"
            ></dateComponent>
          </div>
        </div>
        <div style="border-bottom:1px solid #dddddd;margin-top:10px;"></div>
      </div>
    </div>
  </div>
</template>
<script>
import dateComponent from "@/components/date.vue";
export default {
  name: "timeCondition",
  components: {
    dateComponent: dateComponent
  },
  props: {
    dateObj: {
      type: Object
    },
    companyValue: {
      type: String
    }
  },
  data: function() {
    return {
      dateNameList: ["期間", "対比期間", "商品グループC"],
      timeStr: "",
      fasicalFlag: true
    };
  },
  computed: {
    //用于设置/返回时间类型的数据
    dateType: {
      get: function() {
        return this.dateObj.dateType;
      },
      set: function(value) {
        this.$set(this.dateObj, "dateType", value);
      }
    }
  },
  watch: {
    "dateObj.dateCondition"() {
      if (this.dateObj.dateCondition === "dateGoods") {
        this.dateNameList = ["商品グループA", "商品グループB", "商品グループC"];
      } else {
        this.dateNameList = ["期間", "対比期間", "商品グループC"];
      }
    },
    "dateObj.dateType"() {
      for (var i = 0; i < this.dateObj.dateArray.length; i++) {
        this.dateObj.dateArray[i].dateType = this.dateObj.dateType;
      }
    },
    companyValue() {
      for (var index = 0; index < global.companyOptions.length; index++) {
        if (this.companyValue === global.companyOptions[index].id) {
          this.fasicalFlag = global.companyOptions[index].fiscal;
          break;
        }
      }
    },
    fasicalFlag() {
      if (!this.fasicalFlag && this.dateType === "m") {
        this.dateType = "M";
      }
    }
  },
  created() {
    var yTimeDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
    var month = yTimeDate.getMonth() + 1;
    var yTime =
      "" +
      yTimeDate.getFullYear() +
      (month.toString().length < 2 ? "0" + month : month) +
      (yTimeDate.getDate().toString().length < 2
        ? "0" + yTimeDate.getDate()
        : yTimeDate.getDate());
    this.timeStr = yTime + "~" + yTime;
  }
};
</script>
<style scoped>
span {
  font-weight: normal;
}
.left_margin {
  margin-left: 10px;
}
.hideCondition {
  display: none;
}
.buttom_margin {
  margin-bottom: 10px;
}
</style>